<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Timeliner - Make Timelines and TimeMaps fast! - from the Open Knowledge Foundation Labs</title>
  <meta name="description" content="Timeliner - Make Timelines and TimeMaps fast! - from the Open Knowledge Foundation Labs" />

  <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

  <!-- okf ribbon -->
  <link rel="stylesheet" href="http://assets.okfn.org/themes/okfn/okf-panel.css"/>

  <!-- Custom CSS for the Timeliner Online App -->
  <link rel="stylesheet" href="css/style.css">
</head>
<body class="home">
<div id="okf-panel" class="collapse">
  <iframe src="http://assets.okfn.org/themes/okfn/okf-panel.html"></iframe>
</div>
<div class="okfn-ribbon">
  <a data-toggle="collapse" data-target="#okf-panel" href="http://okfnlabs.org/" target="_blank">An Open Knowledge Foundation Labs Project</a>
</div>

<div class="container">
<div class="content">
  <div class="page home">
    <div class="page-header">
      <h1>
        Timeliner
        <small>Make elegant timelines and timemaps using Google Spreadsheets</small>
      </h1>
    </div>
      <div class="content">
        <div class="row-fluid">
          <div class="span8">
            <form class="js-load-url form-horizontal">
              <fieldset>
                <legend>Connect Your Google Spreadsheet</legend>
                <div class="control-group">
                  <label for="source" class="control-label">Google Spreadsheet URL</label>
                  <div class="controls">
                    <input type="url" value="" name="source" class="input span10" placeholder="URL to Google Spreadsheet" />
                    <button title="Select from Google Drive" class="gdrive-import btn"><i class="gdrive"></i></button>
                    <p class="help-block">The Timeliner uses data in a spreadsheet in Google Docs allowing you to edit the timeline by editing the spreadsheet.</p>
                  </div>
                </div>
                <div class="control-group">
                  <div class="controls">
                    <button type="submit" class="btn btn-primary">Load &raquo;</button>
                  </div>
                </div>
              </fieldset>
            </form>
          </div>
          <div class="span4">
            <h4>Examples</h4>
            <h5><a href="view/?url=https://docs.google.com/spreadsheet/ccc?key=0Al6mO9_3Hr2PdGZnRjEwUWxOekhreTNNZEFEMWRZbkE">Medieval Philosophers</a> (<a href="https://docs.google.com/spreadsheet/ccc?key=0Al6mO9_3Hr2PdGZnRjEwUWxOekhreTNNZEFEMWRZbkE">source</a>)</h5>
            <a href="view/?url=https://docs.google.com/spreadsheet/ccc?key=0Al6mO9_3Hr2PdGZnRjEwUWxOekhreTNNZEFEMWRZbkE">
              <img src="http://farm6.staticflickr.com/5323/8768093210_3343870b2a_n.jpg" alt="Medieval Philosophers" />
            </a>
            <!--h5>
              <a href="view/?url=https://docs.google.com/a/okfn.org/spreadsheet/ccc?key=0AvNIiaD6NBlTdC10NjhGOHp6am44VG00R0pNaVMtQ1E">London Tube</a> (<a href="https://docs.google.com/a/okfn.org/spreadsheet/ccc?key=0AvNIiaD6NBlTdC10NjhGOHp6am44VG00R0pNaVMtQ1E#gid=0">source</a>)
            </h5>
            <a href="view/?url=https://docs.google.com/a/okfn.org/spreadsheet/ccc?key=0AvNIiaD6NBlTdC10NjhGOHp6am44VG00R0pNaVMtQ1E">
              <img src="..." alt="" />
            </a-->
          </div>
        </div>


        <h2 style="text-align: center; margin: 30px;">How It Works</h2>
        <div class="row instructions">
          <div class="span4">
            <div class="well">
              <h3>Create a Spreadsheet</h3>
              <p>We suggest you copy <a href="https://docs.google.com/spreadsheet/ccc?key=0Aon3JiuouxLUdDlGV2lCakoydVh1U014cHRqcXpoWVE">this template</a> so that columns have the right names.</p>
            </div>
          </div>
          <div class="span4">
            <div class="well">
              <h3>Publish the Spreadsheet</h2>
              <p>Publish your spreadsheet - see File menu &rarr; Publish to Web in Google Docs.</p>
            </div>
          </div>
          <div class="span4">
            <div class="well">
              <h3>Connect it to Timeliner</h3>
              <p>Paste the spreadsheet URL (e.g. ) into the form above and hit Load.</p>
            </div>
          </div>
        </div>

        <h2 style="text-align: center; margin: 30px 0;" id="credits">Credits</h2>
        <p style="width: 500px; margin: auto;">
        Timeliner is only possible thanks to a set of awesome open-source components including <a href="http://timelinejs.org/">TimelineJS</a>, <a href="http://okfnlabs.org/recline/">ReclineJS</a>, <a href="http://leafletjs.com/">Leaflet</a>, <a href="http://backbonejs.org/">Backbone</a> and <a href="http://twitter.github.com/bootstrap/">Bootstrap</a>. You can find the <a href="https://github.com/okfn/timeliner">full open-source source for Timeliner on GitHub here</a>.
        </p>
      </div>
    <footer>
    The <a href="http://timeliner.okfnlabs.org/"><strong>Timeliner </strong></a> is a project of <a href="http://okfnlabs.org/">Open Knowledge Foundation</a> &ndash; <a href="https://github.com/okfn/timeliner">Source Code</a>.
    Timeliner is open-source &ndash; 
    <a href="https://github.com/okfn/timeliner#copyright-and-license">Copyright &amp; License</a>.
    </footer>
  </div>
</div> <!-- /content -->
</div> <!-- / container-fluid -->
  <!-- 3rd party JS libraries -->
  <script type="text/javascript" src="vendor/recline/vendor/jquery/1.7.1/jquery.js"></script>
  <script type="text/javascript" src="vendor/recline/vendor/underscore/1.4.4/underscore.js"></script>
  <script type="text/javascript" src="http://okfnlabs.org/recline.backend.gdocs/backend.gdocs.js"></script>

  <script src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    // setup gdocs file picker
    google.load('picker', '1');
  </script>

  <!-- non-library javascript specific to this demo -->
  <script type="text/javascript" src="js/app.js"></script>

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-33874954-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</body>
</html>

